<template>
	<Layout>
		<Header class="header">
			<Row>
				<i-col span="4" offset="1"><img src="../assets/logo.png" alt="login" class="login" /></i-col>
				<!-- <i-col span="14">
					<Menu mode="horizontal" :active-name="msg">
						<MenuItem name="/app" to="/app">应用分析</MenuItem>
						<MenuItem name="/push" to="/push">推送营销</MenuItem>
						<MenuItem name="/dev" to="/dev">开发助手</MenuItem>
						<MenuItem name="/manage" to="/manage">应用管理</MenuItem>
					</Menu>
				</i-col> -->
				<i-col offset="14" span="4">
					<Row>
						<i-col span="8">
							<Dropdown>
								<Avatar src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2637632934,2116101840&fm=26&gp=0.jpg"></Avatar>
								<DropdownMenu slot="list">
									<DropdownItem>我的主页</DropdownItem>
									<DropdownItem>我的收藏</DropdownItem>
									<DropdownItem>
										设置
										<Badge status="error" />
									</DropdownItem>
									<DropdownItem divided>退出登录</DropdownItem>
								</DropdownMenu>
							</Dropdown>
						</i-col>
						<i-col span="8">
							<Dropdown>
								<Badge :count="2" :offset="[20, 4]"><Icon type="ios-notifications-outline" size="24" /></Badge>
								<DropdownMenu slot="list">
									<Tabs value="notification">
										<TabPane label="通知" name="notification"><div class="cen">通知内容</div></TabPane>
										<TabPane label="关注" name="follow"><div class="cen">关注内容</div></TabPane>
										<TabPane label="系统" name="system"><div class="cen">系统内容</div></TabPane>
									</Tabs>
								</DropdownMenu>
							</Dropdown>
						</i-col>
						<i-col span="8"><Icon type="ios-color-palette-outline" size="25" @click="openDra = true" /></i-col>
					</Row>
				</i-col>
			</Row>
		</Header>
		<Layout>
			<Sider class="sider" width="240" collapsible v-model="isopen" :class="{ 'sider-hide': isopen }"><sild /></Sider>
			<Content class="content" :class="{ 'content-expand': isopen }">
				<!-- 面包屑组件 -->
				<!-- <Breadcrumb>
					<BreadcrumbItem to="/">Home</BreadcrumbItem>
					<BreadcrumbItem to="/app">Apps</BreadcrumbItem>
					<BreadcrumbItem >iView</BreadcrumbItem>
				</Breadcrumb> -->
				<bread :obj="msg" />
				<Card style="margin-top: 16px;">
					<!-- 定义页面的内容 -->
					<router-view></router-view>
				</Card>
			</Content>
		</Layout>
		<Drawer title="选择配色" v-model="openDra"></Drawer>
	</Layout>
</template>

<script>
import sild from './silder.vue';
import bread from './bread.vue';
export default {
	components: {
		sild,
		bread
	},
	data() {
		return {
			msg: '',
			openDra: false,
			isopen: false
		};
	},
	watch: {
		'$route.path': {
			handler(val) {
				this.msg = val
			},
			immediate: true,
			deep: true
		}
	}
};
</script>

<style>
.header {
	width: 100%;
	height: 60px;
	background-color: #fff;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
}
.login {
	height: 50px;
	margin-top: 5px;
}
.cen {
	text-align: center;
	height: 200px;
}
.ivu-menu-horizontal.ivu-menu-light:after {
	height: 0;
}
.sider {
	position: fixed;
	height: 100%;
	overflow: auto;
	z-index: 9;
}
.sider-menu {
	margin-top: 60px;
}
.sider-hide .ivu-menu-item span {
	display: none;
}
.content {
	margin-left: 240px;
	margin-top: 60px;
	padding: 16px;
	transition: all 0.2s ease-in-out;
}
.content-expand {
	margin-left: 64px;
}
</style>
